<template>
    <label class="g-checkbox">

        <span class="g-checkbox-input" 
            
            :class="{'is-disabled': disabled, 'is-checked': isChecked}">

            <span class="g-checkbox-inner"></span>

            <input
                class="g-checkbox-original"
                type="checkbox"
                :disabled="disabled"
                :value="value"
                :name="name"
                v-model="vmodel"
                @change="handleChange">

        </span>

        <span class="g-checkbox-label">
            <slot></slot>
        </span>

    </label>
</template>

<script>

    export default {

        name:'GCheckbox',

        data: function() {
            return {
                selfModel: false,
            }
        },

        props: {
            disabled: Boolean,
            value: {},
            checked: Boolean,
            name: String,
            model: [Array, Boolean]
        },

        computed: {
            isChecked() {

                if (Array.isArray(this.vmodel)) {
                    return this.vmodel.includes(this.value);
                } else {
                    return this.vmodel;
                }
                
            },

            vmodel: {
                get () {
                    return this.model;
                },

                set (val) {
                    this.$emit('change', val);
                }
            }
        },

        methods: {
            handleChange () {

            }
        }

    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

    @import "common";

    .g-checkbox {

        color: $deepGray;
        font-size: 12px;
        position: relative;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        user-select: none;
        margin-right: 6px;

        .g-checkbox-input {

            white-space: nowrap;
            cursor: pointer;
            outline: none;
            display: inline-block;
            line-height: 1;
            position: relative;
            vertical-align: middle;

            &.is-disabled {

                .g-checkbox-inner {
                    background-color: #edf2fc;
                    border-color: #dcdfe6;
                    cursor: not-allowed;
                }
                
            }

            &.is-disabled+.g-checkbox-label {
                color: #c0c4cc;
                cursor: not-allowed;
            }

            &.is-checked {

                .g-checkbox-inner {
                    background-color: #409eff;
                    border-color: #409eff;

                    &::after {
                        transform: rotate(45deg) scaleY(1);
                    }
                }
            }

            .g-checkbox-inner {
                display: inline-block;
                position: relative;
                border: 1px solid #dcdfe6;
                border-radius: 2px;
                box-sizing: border-box;
                width: 14px;
                height: 14px;
                background-color: #fff;
                z-index: 1;
                transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);

                &::after {

                    box-sizing: content-box;
                    content: "";
                    border: 1px solid #fff;
                    border-left: 0;
                    border-top: 0;
                    height: 7px;
                    left: 4px;
                    position: absolute;
                    top: 1px;
                    transform: rotate(45deg) scaleY(0);
                    width: 3px;
                    transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
                    transform-origin: center;

                }
                

            }

            .g-checkbox-original {
                opacity: 0;
                outline: none;
                position: absolute;
                margin: 0;
                width: 0;
                height: 0;
                z-index: -1;
            }
        }

        .g-checkbox-label {
            display: inline-block;
            line-height: 19px;
            font-size: 12px;
        }
    }
    

</style>
